<template>
    <div class="container" v-if="store.isLookNotice">
        <div class="add">
            <h3> 发布公告 </h3>
        </div>
        <el-divider />
        <el-table :data="store.currentData" stripe style="width: 100%">
            <el-table-column prop="date" label="发布日期" width="200" />
            <el-table-column prop="dateNow" label="发布时间" />
            <el-table-column prop="type" label="发布类型" />
            <el-table-column prop="detail" label="发布内容" />
        </el-table>
        <el-form-item>
            <div class="btn">
                <el-button class="closePage" type="danger" @click="looked">X</el-button>
            </div>
        </el-form-item>
        <div class="example-pagination-block">
            <el-pagination @current-change="handlePage" layout="prev, pager, next" :total="store.total"
                :page-size="5" />
        </div>
    </div>
</template>

<script setup>
import { mapStore } from '@/store';
const store = mapStore()

const looked = () => {
    store.isLookNotice = false
}

const handlePage = (page) => {
    store.currentData = store.noticeLists.slice((page - 1) * 5, page * 5)
}

</script>

<style scoped lang="scss">
.container {
    position: fixed;
    top: 20%;
    left: 30%;
    z-index: 1000;
    border: solid 12px #99999979;
    border-radius: 10px;
    background: #fff;
    width: 600px;
    height: 500px;

    .add {
        height: 50px;
        background: rgba(135, 207, 235, 0.667);

        h3 {
            color: #fff;
            text-align: center;
            line-height: 50px;
        }
    }

    .el-form {
        padding: 20px;

        .btn {
            margin: auto;
        }
    }
}

.closePage {
    position: fixed;
    top: 23%;
    right: 32%;
}
</style>
